<template>
  <div class="x-app-course-list">
    <van-pull-refresh v-model="refreshIsLoading" @refresh="onRefresh">
      <slot name="header"></slot>
      <van-list v-model="isLoading" :finished="finished" @load="onLoad" :finished-text="(finished && list.length > 0)? '没有更多了' : ''">
        <div class="x-app-course-list-content">
          <x-app-course v-for="item in list" :key="item.id" :data="item" :showTrainEndTime="showTrainEndTime"></x-app-course>
          <van-empty description="暂无数据" v-if="finished && list.length === 0" />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: 'AppCourseList',
  props: {
    list: {
      type: Array,
      default: () => { return [] }
    },
    loading: {
      type: Boolean,
      default: false
    },
    refreshLoading: {
      type: Boolean,
      default: false
    },
    finished: {
      type: Boolean,
      default: false
    },
    showTrainEndTime: { // 培训截止时间显示
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
    };
  },
  computed: {
    isLoading: {
      get () {
        return this.loading
      },
      set (val) {
        this.$emit('update:loading', val)
      }
    },
    refreshIsLoading: {
      get () {
        return this.refreshLoading
      },
      set (val) {
        this.$emit('update:refreshLoading', val)
      }
    },
  },
  methods: {
    onLoad () {
      this.$emit('load')
    },
    onRefresh () {
      this.$emit('load', 1)
    },
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
@import "@/css/variable.scss";
/deep/.van-pull-refresh {
  height: 100%;
  .van-pull-refresh__track {
    display: flex;
    flex-direction: column;
  }
}
/deep/.x-app-course-list {
  height: 100%;
  .van-list {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar {
      background-color: #fff;
    }
    &::-webkit-scrollbar-track {
      background-color: #fff;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
    }
    .x-app-course-list-content {
      background: $white1;
      border-radius: 10px;
      padding: 16px;
    }
  }
}
</style>
